<div class="step sms-step panel panel-default">
	<div class="panel-heading">
			<step-heading></step-heading>
	</div>

	<div class="panel-body" ng-hide='step.iface.isCollapsed'>
		<div class='row form-group'>
			<div lookup-context class='col-md-12'>
				<div class="form-group">
					<label class="help-tooltip" tooltip="{{'smsStepSmsTextLabelPopover' | translate}}" tooltip-popup-delay="1000" tooltip-trigger="mouseenter">{{'smsStepSmsTextLabel' | translate}}</label>
					<textarea ng-model='step.text' lookup-target class="form-control"></textarea>	
				</div>
				<div class="form-group pull-right">
					<variable-lookup variable="step.text" view="standalone"></variable-lookup>
				</div>				
			</div>
		</div>
		<div class="form-group row">
			<div class='col-md-4'>
				<form name="formTo" novalidate>
					<div lookup-context class="input-group input-group-sm">
						<span class="input-group-addon">{{'smsStepToLabel' | translate}}<!-- &nbsp;<i class="fa fa-info-circle rvd-clickable" popover='Takes a valid E.164 phone number as a value. RestComm will send an SMS message to this number. When sending an SMS during an incoming call, it defaults to the caller. When sending an SMS during an outgoing call, it defaults to the called party.' popover-placement='top'></i>--></span>
						<div class="fac-warning-wrap input-group-sm">
							<input type='text' name='to' ng-model='step.to' lookup-target auto-clear class="form-control" required></input>
							<fac-warning monitor="step.to" validator="outboundSMS" blocked-message="{{facWarning.message}}"></fac-warning>
						</div>
						<variable-lookup variable="step.to" view="input-group"></variable-lookup>
					</div>
					<div ng-show="formTo.to.$invalid" class="validation-error pull-left">{{'smsStepToRequiredLabel' | translate}}</div>
				</form>
			</div>
			<div class="col-md-8">
				<div class="input-group form-group input-group-sm">
					<span class="input-group-addon help-tooltip" tooltip-trigger='mouseenter' tooltip-popup-delay='1000' tooltip="{{'smsStepContinueToTooltip' | translate}}">{{'smsStepContinueToLabel' | translate}}</span>
					
					<select sync-model name='next' null-if-empty ng-model='step.next' ng-options='target.name as target.label for target in getAllTargets()' class="form-control">
						<option value=""></option>
					</select>
				</div>
				<div class="validation-error" ng-show="form.next.$invalid">{{'smsStepChooseTargetLabel' | translate}}</div>
			</div>
		</div>
		<div class="form-group row">
			<div class='col-md-4'>	
				<form name="formFrom" novalidate>
					<div lookup-context class="input-group input-group-sm">
						<span class="input-group-addon">{{'smsStepFromLabel' | translate}}<!-- &nbsp;<i class="fa fa-info-circle rvd-clickable" popover='Takes a valid E.164 phone number as a value. When sending an SMS during an incoming call, it defaults to the calling party. When sending an SMS during an outgoing call, it defaults to the called party.' popover-placement='top'></i>--></span>
						<input type='text' name='from' ng-model='step.from' lookup-target auto-clear class="form-control" required></input>
						<variable-lookup variable="step.from" view="input-group"></variable-lookup>
					</div>	
					<div ng-show="formFrom.from.$invalid" class="validation-error pull-left">{{'smsStepFromRequiredLabel' | translate}}</div>	
				</form>	
			</div>			
			
			<div class='col-md-8'>
				<div class="input-group form-group input-group-sm">
					<span class="input-group-addon help-tooltip" tooltip-trigger='mouseenter' tooltip-popup-delay='1000' tooltip="{{'smsStepStatusCalbackTooltip' | translate}}">{{'smsStepStatusCallbackLabel' | translate}}</span>
					<input type='text' auto-clear name='statusCallback' ng-model='step.statusCallback' class="form-control" placeholder="{{'smsStepStatusCallbackInputPlaceholder' | translate}}"></input>
				</div>
			</div>
		</div>


	</div>
</div>
